<template>
  <div class="container pd50">
    <div class="header mb20">
      <div class="header-media">
        <img class="user-avatar" :src="userInfo.avatarUrl" alt="">
      </div>
      <div class="header-title">
        {{userInfo.nick}}
      </div>
      <div class="header-setting" @click="onSettingClick">
        <van-icon name="setting-o" />
      </div>
    </div>
    <div class="main">
      <div class="group balance-group">
        <van-cell value="个人资料" />
        <van-row class="group-inner">
          <van-col span="6">
            <van-image
              round
              width="50px"
              height="50px"
              :src="user.headImg ? user.headImg : require('@/assets/avatar_default.png')"
            />
          </van-col>
          <van-col @click="toUser" span="6" style="height: 50px;line-height: 50px">
            {{user.nickName ? user.nickName : '登录'}}
          </van-col>
        </van-row>
      </div>
      <div class="group order-group">
        <van-cell
          title="我的功能"/>
        <div class="user-section-bd ui-clearfix">
          <router-link :to="'/order-list'"
            class="user-section-grid">
            <van-icon name="pending-payment"
              :info="count.count_id_no_pay" />
            <div class="user-section-grid-title">订单</div>
          </router-link>
          <router-link :to="'/complain-list'"
            class="user-section-grid">
            <van-icon name="chat-o"
              :info="count.count_id_no_transfer" />
            <div class="user-section-grid-title">投诉</div>
          </router-link>
          <!-- <router-link :to="'/comment'"
            class="user-section-grid">
            <van-icon name="chat-o"
              :info="count.count_id_no_transfer" />
            <div class="user-section-grid-title">我的评论</div>
          </router-link> -->
        </div>
      </div>
      <div class="group changy-group">
        <van-cell value="我的工具" class="mb10" />
        <van-grid :border="false" :column-num="4">
          <van-grid-item
            v-for="(item,index) in tools"
            :key="index"
            :icon="item.icon"
            :text="item.title"
            :to="item.path"
          />
        </van-grid>
      </div>
      <div class="group about-group">
        <van-row class="group-inner">
        <van-cell title="关于"
          @click="onShowAbout" />
          </van-row>
      </div>
      <div class="group about-group">
        <van-row class="group-inner">
        <van-cell title="退出"
          @click="loginout" />
          </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      userInfo: {},
      active: 0,
      balance: 0,
      freeze: 0,
      score: 0,
      totleConsumed: 0,
      count: {}, // 订单统计
      tools: [
        // { icon: 'location-o', title: '收货地址', path: '/address-list' },
        { icon: 'setting-o', title: '设置', path: '/setting' }
      ]
    }
  },
  filters: {
    formatYuan(value) {
      return parseInt(value).toFixed(2)
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
  },
  methods: {
    ...mapMutations(['setUser']),
    /**
     * 登录
     */
    toUser() {
      if (Object.keys(this.user).length > 0) {
        this.$router.push({ path: '/setting' })
      } else {
        this.$router.push({
          path: '/login'
        })
      }
    },
    /**
     * 退出登录
     */
    loginout() {
      this.setUser({})
      this.$router.push({ path: '/login' })
    },
    onShowAbout() {
      this.$dialog.alert({
        // title: '标题',
        message: this.$store.state.globalData.desc
      }).then(() => {
        // on close
      })
    },
    onSettingClick() {
      this.$router.push({ path: '/setting' })
    }
  }
}
</script>
<style lang="less" scoped>
.style-box() {
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.header {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 180px;
  color: #fff;
  padding: 0 15px;
  // background-color: #fe4140;
  background: linear-gradient(
    309deg,
    rgba(255, 112, 61, 1) 0%,
    rgba(255, 70, 57, 1) 100%
  );
  &-media {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
  }
  &-title {
    font-size: 18px;
  }
  &-setting {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24px;
  }
}
.main {
  // padding:0 20px;
  margin-top: -50px;
}
.group {
  .style-box();
  margin: 0 15px 15px 15px;
  &-inner{
    padding:10px 0;
  }
}
.balance-group {
  .style-box();
  .van-row {
    text-align: center;
  }
  .van-col {
    text-align: center;
    font-size: 15px;
    color: #ff4639 ;
  }
  &-title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
  }
  &-txt {
    font-size: 12px;
    color: #999;
  }
}
.changy-group {
  .van-icon {
    font-size: 24px;
  }
  .van-col {
    margin-bottom:10px;
  }
}

.user-gruop {
  &-name {
    // padding: 10px 0;
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
  }
}
.user-section {
  .style-box();
  margin: 0 20px 15px 20px;
  &-title {
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  &-hd {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  &-bd {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 0;
  }
  &-grid {
    box-sizing: border-box;
    width: 20%;
    float: left;
    text-align: center;
    .van-icon {
      font-size: 24px;
      margin-bottom: 5px;
    }
    &-img {
      display: inline-block;
      width: 30px;
      height: 30px;
      // margin-bottom: 5px;
    }
    &-title {
      color: #333;
      font-size: 12px;
    }
  }
}
</style>
